<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="min30">
			<u-search placeholder="请输入商品名搜索" v-model="search" actionText="搜索" @custom="!shop_id ? getSearch() : getShopSearch()" @search="!shop_id ? getSearch() : getShopSearch()"
				:showAction="true" :animation="true" height="30"></u-search>
		</view>
		<view class="" v-if="goodsArr.length != 0">
			<!-- 列表 -->
			<view class="min30_rl minbottom20">
				<view class="row flexwrap">
					<view class="rad2 list column mintop30"
						style="box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(206,188,172,0.24);width: 48%;"
						v-for="(item,index) in goodsArr"
						@click="$jump.nav('/indexpackage/user/goods_info?id=' + item.id)">
						<image :src="item.image" mode=""
							style="width: 330rpx;height: 330rpx;border-radius: 20rpx 20rpx 0 0;"></image>
						<view class="column min20 flex1">
							<view class="size26 col3 font500 omit2">
								{{ item.title }}
							</view>
							<view style="margin-top: auto;margin-bottom: 0;">
								<view class="row">
									<view class="size22 font500 row align_item_c" style="color: #C0C0C0;">月销量
										<view class="">
											{{ item.sales }}
										</view>
									</view>
									<view class="minau minright0 row">
										<view class="size36 font600" style="color: #FE3C3C;">
											<text>￥</text>
											<text>{{ !shop_id ? item.specs[0].selling_price : item.selling_price}}</text>
										</view>
									</view>
								</view>
								<view class="row mintop20 align" v-if="!shop_id">
									<image :src="item.shop.stores_logo" class="rad50" style="width: 34rpx;height: 34rpx;">
									</image>
									<view class="font500 size24 minleft10 omit1 flex1" style="color: #383838;">
										{{ item.shop.stores_name }}
									</view>
									<u-icon name="arrow-right" color="#333" size="14"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 50rpx;"><u-loadmore :status="status" /></view>
		</view>
		<view class="" v-else>
			<u-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				shop_id: '',
				page: 1,
				status: 'nomore',
				goodsArr: [],
				loadmore: [],
			}
		},
		watch: {
			search(v, o) {
				if (this.search.length == 0) {
					this.goodsArr = []
				}
			}
		},
		onLoad(op) {
			this.search = op.search
			this.shop_id = op.shop_id
			this.page = 1
			if (op.shop_id) {
				this.getShopSearch()
			} else {
				this.getSearch()
			}

		},
		onShow() {
			//当前页面展示的时候他就执行该生命周期
			const token = uni.getStorageSync('token');
			if (token) {
				//如果存在token
				if (this.search) {
					// uni.pageScrollTo({
					// 	scrollTop: 0,
					// 	duration: 10 // 滚动动画时长，默认300ms
					// });

				}
				//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
				//那么我们一起来获取用户信息
			} else {

				uni.showToast({
					title: '您还未登录，正在前往登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.navigateTo({
						url: "/mypackage/user/login"
					})
				}, 1000)
			}
		},
		onReachBottom() {
			if (this.page < 0) return;
			this.status = 'loading';
			this.page = ++this.page
			if (this.shop_id) {
				this.getShopSearch()
			} else {
				this.getSearch()
			}
			setTimeout(() => {
				console.log(this.loadmore);
				if (this.loadmore.length == 0) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			async getShopSearch() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("home/search_product/" + this.shop_id, {
					goods_name: this.search,
					page: this.page
				})
				if (code == 200) {
					if (this.page != 1) {
						this.loadmore = data.items
						for (var i = 0; i < data.items.length; i++) {
							this.goodsArr.push(data.items[i]); // 加载的数据追加在上一页后面
						}
					} else {
						this.goodsArr = data.items
					}
				} else if (code == 500) {
					this.goodsArr = data
					this.loadmore = data
				} else {
					console.log(message);
				}
			},
			async getSearch() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("home/like_goods", {
					name: this.search,
					page: this.page
				})
				if (code == 200) {
					if (this.page != 1) {
						this.loadmore = data.items
						for (var i = 0; i < data.items.length; i++) {
							this.goodsArr.push(data.items[i]); // 加载的数据追加在上一页后面
						}
					} else {
						this.goodsArr = data.items
					}
				} else if (code == 500) {
					this.goodsArr = data
					this.loadmore = data
				} else {
					console.log(message);
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style scoped lang="less">
	.list {
		&:nth-child(2n) {
			margin-left: 26rpx;
		}
	}
</style>